<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
</head>
<body>

<div id="app">
    <p id="info">{{info}}</p>
    <p><input type="text" v-model="info"></p>
</div>

<!--
    vue实例生命周期
    1. 初始化阶段
      beforeCreate()
      created()
      beforeMount()
      mounted()
    2.运行阶段
      beforeUpdate()
      updated()
    3.销毁阶段
      beforeDestroy()
      destroyed()
-->
<script src="../js/vue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            info:'hello vue'
        },
        methods:{},
        beforeCreate(){  //  vue实例调用的第一个生命周期函数   在该阶段vue实例只完成了 事件初始化  生命周期函数的初始化
            console.log("=========beforeCreate=========")
            console.log("this.info = " +this.info)
        },
        created(){//  vue实例调用的第二个生命周期函数   在该阶段vue实例完成了  data  el  template 属性的初始化
            console.log("=========created()=========")
            console.log("this.info = " +this.info)
        },
        beforeMount(){//  vue实例调用的第三个生命周期函数   在该阶段vue实例完成了  模板的编译  尚未完成替换
            let info =   document.getElementById("info").innerText
            console.log("=========beforeMount=========")
            console.log(" p.innerText info = " +info)
        },
        mounted(){//  vue实例调用的第四个生命周期函数   在该阶段vue实例完成了    完成模板的替换
            let info =   document.getElementById("info").innerText
            console.log("=========mounted=========")
            console.log(" p.innerText info = " +info)
        },

        beforeUpdate(){
            // vue实例调用的第五个生命周期函数    在该位置 vue实例已经完成初始化 进入运行阶段
            // 一旦data数据被改变 该函数就会被 自动调用    页面数据没有完成替换
            let info =   document.getElementById("info").innerText
            console.log("=========beforeUpdate()=========")
            console.log(" p.innerText info = " +info)
        },
        updated(){
            // vue实例调用的第六个生命周期函数   页面中的数据已经完成了重新渲染
            let info =   document.getElementById("info").innerText
            console.log("=========updated()=========")
            console.log(" p.innerText info = " +info)
        },

        beforeDestroy(){// vue实例调用的第七个生命周期函数   页面中的数据已经完成了重新渲染
            console.log("============ beforeDestroy()============")
        },
        destroyed(){// vue实例调用的第八个生命周期函数   页面中的数据已经完成了重新渲染
            console.log("============destroyed()============")
            console.log("===============Vue实例被销毁=================")
        }

    })
</script>
</body>
</html>
